<template>
  <div>
    <div style="margin-top: 20px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="80px"
      >
        <el-row :gutter="10">
          <!-- <el-col :span="2">
                        <el-form-item label="搜索"></el-form-item>
                    </el-col> -->
          <el-col :span="24">
            <el-form-item label="搜索" prop="textName">
              <el-input
                v-model="queryParams.textName"
                placeholder="请输入课文名称、课文ID、作者名称、名师诵读"
                clearable
                @keyup.enter.native="keywordSearch"
                title="输入课文名称、课文ID、作者名称、名师诵读进行搜索"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="keywordSearch"
                >搜索
              </el-button>
              <el-button
                icon="el-icon-refresh"
                size="medium"
                @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <!-- <el-col :span="2">
                        <el-form-item label="筛选"></el-form-item>
                    </el-col> -->
          <el-col :span="22">
            <el-form-item label="筛选" prop="gradeId">
              <el-select
                v-model="queryParams.gradeId"
                placeholder="请选择归属年级"
                @change="selectGrade"
              >
                <el-option
                  v-for="item in gradeList"
                  :key="item.gradeId"
                  :label="item.gradeName"
                  :value="item.gradeId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="semester">
              <el-select
                v-model="queryParams.semester"
                placeholder="请选择归属学期"
                @change="selectSemester"
              >
                <el-option
                  v-for="item in semesterList"
                  :key="item.semesterId"
                  :label="item.semesterName"
                  :value="item.semesterId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="unitId">
              <el-select
                v-model="queryParams.unitId"
                placeholder="请选择归属单元"
                @change="selectUnit"
              >
                <el-option
                  v-for="item in unitList"
                  :key="item.unitId"
                  :label="item.unitName"
                  :value="item.unitId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              @click="handleAdd"
              v-hasPermi="['recitation:text:add']"
              >新增课文
            </el-button></el-col
          >
        </el-row>
      </el-form>
      <el-row :gutter="10">
        <el-col :offset="1" :span="1.5"> </el-col>
      </el-row>

      <el-table
        v-loading="loading"
        :data="textList"
        :default-sort="{
          prop: ['gradeId', 'unitId'],
          order: 'descending',
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="课文ID" align="center" prop="textId" sortable />
        <el-table-column label="课文名称" align="center" prop="textName" />
        <el-table-column label="作者名称" align="center" prop="textAuthor" />
        <el-table-column label="归属年级" align="center" prop="gradeName" />
        <el-table-column
          label="归属学期"
          align="center"
          prop="semesterName"
          sortable
        />
        <el-table-column
          label="归属单元"
          align="center"
          prop="unitName"
          sortable
        />
        <el-table-column label="名师朗读" align="center" prop="teacherName" />
        <el-table-column
          label="信息更新时间"
          align="center"
          sortable
          prop="updatedTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updatedTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <!-- v-hasPermi="['recitation:text:edit']" -->
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleUpdate(scope.row)"
              >查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 @size-change="handleSizeChange" -->
    <el-pagination
      style="margin-top: 20px"
      align="center"
      @current-change="getList"
      @size-change="handleSizeChange"
      background
      prev-text="上一页"
      next-text="下一页"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="limit"
      :pager-count="5"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
    >
    </el-pagination>
    <!-- 添加或者修改弹出页面 -->
    <el-dialog :title="title" :visible.sync="open" width="980px" append-to-body>
      <el-form
        ref="addEeditFormRef"
        :model="addEeditFormData"
        :rules="rules"
        label-position="top"
        label-width="80px"
        :visible.sync="open"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="课文名称"
              prop="textName"
              class="grid-content bg-purple"
            >
              <el-input
                v-model="addEeditFormData.textName"
                maxlength="20"
                minlength="1"
                placeholder="请输入课文名称"
                style="width: 96%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="课文作者"
              prop="textAuthor"
              class="grid-content"
            >
              <el-input
                maxlength="10"
                minlength="2"
                v-model="addEeditFormData.textAuthor"
                placeholder="请输入课文作者"
                style="width: 96%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="归属题材"
              prop="type"
              class="grid-content bg-purple-light"
            >
              <el-select
                v-model="addEeditFormData.subjectId"
                placeholder="请选择归属题材"
                style="width: 96%"
              >
                <el-option
                  v-for="typeObject in SubjectList"
                  :key="typeObject.subjectId"
                  :label="typeObject.subjectName"
                  :value="typeObject.subjectId"
                  >{{ typeObject.subjectName }}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="归属年级"
              prop="gradeId"
              class="grid-content bg-purple-light"
            >
              <el-select
                v-model="addEeditFormData.gradeId"
                placeholder="请选择归属年级"
                style="width: 96%"
                @change="GradeSelect"
              >
                <el-option
                  v-for="item in gradeList"
                  :key="item.gradeId"
                  :label="item.gradeName"
                  :value="item.gradeId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="归属学期"
              prop="semester"
              class="grid-content bg-purple-light"
            >
              <el-select
                v-model="addEeditFormData.semester"
                placeholder="请选择归属学期"
                style="width: 96%"
                @change="XueqiSelect"
              >
                <el-option
                  v-for="item in xueqiList"
                  :key="item.semesterId"
                  :label="item.semesterName"
                  :value="item.semesterId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="归属单元"
              prop="unitId"
              class="grid-content bg-purple-light"
            >
              <el-select
                v-model="addEeditFormData.unitId"
                placeholder="请选择"
                style="width: 96%"
              >
                <el-option
                  v-for="item in danyuanList"
                  :key="item.unitId"
                  :label="item.unitName"
                  :value="item.unitId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item
              label="名嘴姓名"
              prop="teacherName"
              class="grid-content bg-purple"
            >
              <!-- multiple
                                collapse-tags -->
              <el-select
                v-show="isShowSelect"
                v-model="addEeditFormData.famousTeacherId"
                placeholder="请选择"
                style="width: 48%"
                @change="selectTeacher"
              >
                <el-option
                  v-for="item in teacherNameList"
                  :key="item.famousTeacherId"
                  :label="item.teacherName"
                  :value="item.famousTeacherId"
                >
                </el-option>
              </el-select>
              <el-input
                v-show="!isShowSelect"
                v-model="addEeditFormData.teacherName"
                placeholder="请输入名嘴姓名"
                style="width: 48%"
              />
              <el-button
                style="margin-left: 20px"
                icon="el-icon-plus"
                @click="isShowInput"
              ></el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="课文全文朗读富文本" prop="content">
              <VueUeditorWrap
                ref="editor"
                v-model="addEeditFormData.content"
                :config="editorConfig"
                :destroy="true"
                placeholder="请输入课文全文朗读文本"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="课文全文朗读纯文本" prop="contentAllText">
              <el-input
                rows="15"
                v-model="addEeditFormData.contentAllText"
                placeholder="请输入课文全文朗读文本"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 课文全文朗读音频 -->
        <el-row>
          <el-col :span="24" style="margin: 0; padding: 0">
            <el-form-item
              label="课文全文朗读音频"
              prop="fileName"
              class="audioLabel"
            >
              <el-input
                style="width: 500px"
                :value="filename"
                placeholder="请选择文件"
                readonly
              />
              <!--引用这个vue框架自带的上传组件-->
              <FileUpload
                style="display: inline-block; margin-left: 20px"
                :fileType="fileType"
                :fileSize="fileSize"
                :isShowTip="false"
                @input="uploadSuccess"
              >
              </FileUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <AddParagraph
          v-for="(item, index) in addEeditFormData.paragraphs"
          :key="index"
          :label="item"
          :value="item"
          :formData="addEeditFormData.paragraphs"
          :num="index + 1"
          :editorConfig="editorConfig"
          @delSection="delSection"
        >
        </AddParagraph>
        <!-- 添加段落 -->
        <el-row>
          <div class="avatar-uploader">
            <img
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
              @click="addParagraphCount"
            />
            <i
              v-else
              class="
                el-icon-plus
                avatar-uploader-icon avatar-uploader-add
                el-upload
              "
              style="font-size: 16px"
              @click="addParagraphCount"
              >添加段落</i
            >
          </div>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listText,
  getText,
  delText,
  addText,
  updateText,
  getSubjectList,
} from "@/api/ywjy/text";
import VueUeditorWrap from "vue-ueditor-wrap";

import Paragraph from "@/views/ywjy/languageList/paragraph";
import AddParagraph from "@/views/ywjy/languageList/paragraph2";
import { listGrade } from "@/api/ywjy/grade";
import { listSemester } from "@/api/ywjy/semester";
import { listUnit } from "@/api/ywjy/unit";
export default {
  name: "languageListDetail",
  components: { Paragraph, AddParagraph, VueUeditorWrap },

  data() {
    return {
      isShowSelect: true,
      count: [1],
      loading: true, // 遮罩层
      ids: [], // 选中数组
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      limit: 10,
      page: 1,
      open: false, //dialog框默认是关闭的
      gradeId: "",
      xueqiList: [],
      danyuanList: [],
      textList: [], // 课文表格数据
      gradeList: [], // 年级表格数据
      unitList: [], //归属表格数据
      semesterList: [], //归属学期数据
      teacherNameList: [], //名嘴列表
      item: "", //搜索框默认值
      title: "", // 弹出层标题
      filename: "", //上传成功后文件名
       SubjectList: [
      //   { subjectId: 1, subjectName: "文章" },
      //   { subjectId: 2, subjectName: "古诗" },
      ], //为了渲染"归属题材"列表而准备的数组
      // 上传的文件列表
      fileType: ["mp3", "aac", "wma", "wav"],
      //上传文件大小限制
      fileSize: 100,
      fileList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        textName: null,
        textAuthor: null,
        gradeId: null,
        unitId: null,
        semester: null,
      },
      // 表单参数 验证的参数 点击添加按钮需要收集的数据
      addEeditFormData: {
        textId: null,
        textName: "", //课文名称
        subjectId: "", //归属题材id
        textAuthor: "", //课文作者
        gradeId: "", //归属年级
        unitId: "", //归属单元
        famousTeacherId: "", //名嘴id
        teacherName: "", //名嘴姓名
        ftextIle: "", //全文音频文件****
        content: "", //带音标 课文全文朗读文本内容
        contentAllText: "", // 不带音标 课文全文朗读文本内容
        semester: "", // 归属学期
        paragraphs: [
          {
            paragraphName: "", //段落名称
            paragraph: "", //段落内容(富文本)
            contentText: "", //生字（纯文本）
            ftextIle: "", // 音频文件
            duration: "", //音频时长
          },
        ], //段落数组
      },
      // 表单校验
      rules: {
        textName: [
          {
            required: true,
            message: "请输入1-20字",
            trigger: "blur",
          },
          0,
        ],
        gradeId: [
          {
            required: true,
            message: "请选择年级",
            trigger: "change",
          },
        ],
        semester: [
          {
            required: true,
            message: "请选择归属学期",
            trigger: "change",
          },
        ],
        subjectId: [
          {
            required: true,
            message: "请输入归属题材",
            trigger: "blur",
          },
        ],
        textAuthor: [
          {
            required: true,
            message: "请输入2-10字",
            trigger: "blur",
          },
        ],
        teacherName: [
          {
            required: true,
            message: "请输入名嘴姓名",
            trigger: "change",
          },
        ],
        paragraphs: [
          { required: true, message: "请输入段落", trigger: "blur" },
        ],
        firstText: [{ required: true, message: " ", trigger: "blur" }],
        unitId: [
          {
            required: true,
            message: "请输入归属单元",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入课文全文朗读文本",
            trigger: "blur",
          },
        ],
        contentAllText: [
          {
            required: true,
            message: "请输入课文全文朗读文本",
            trigger: "blur",
          },
        ],
        fileName: [
          {
            required: true,
            message: "选择文件为音频",
            trigger: "blur",
          },
        ],
      },
      //
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      imageUrl: "", //添加段落时 从官网复制过来 先放在这里
      editorConfig: {
        toolbars: [
          [
            "fullscreen",
            "source",
            "|",
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "customstyle",
            "paragraph",
            "fontfamily",
            "fontsize",
            "|",
            "directionalityltr",
            "directionalityrtl",
            "indent",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "touppercase",
            "tolowercase",
            "|",
            "link",
            "unlink",
            "anchor",
            "|",
            "imagenone",
            "imageleft",
            "imageright",
            "imagecenter",
            "|",
            // 'simpleupload',
            "insertimage",
            "emotion",
            "scrawl",
            "insertvideo",
            "music",
            "attachment",
            "map",
            "gmap",
            "insertframe",
            "insertcode",
            "webapp",
            "pagebreak",
            "template",
            "background",
            "|",
            "horizontal",
            "date",
            "time",
            "spechars",
            "snapscreen",
            "wordimage",
            "|",
            "inserttable",
            "deletetable",
            "insertparagraphbeforetable",
            "insertrow",
            "deleterow",
            "insertcol",
            "deletecol",
            "mergecells",
            "mergeright",
            "mergedown",
            "splittocells",
            "splittorows",
            "splittocols",
            "charts",
            "|",
            "print",
            "preview",
            "searchreplace",
            "drafts",
            "help",
          ],
        ],
        toolbars: [["FullScreen", "Source", "Undo", "Redo", "Bold", "test"]],
        autoHeightEnabled: false, // 自动变高
        autoFloatEnabled: false,
        initialContent: "请输入内容",
        // autoClearinitialContent: true,
        initialFrameWidth: "100%", // 初始化宽
        initialFrameHeight: 260, // 初始化高
        // BaseUrl: "",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口） - 修改成自己后端地址
        serverUrl:
          "https://service.rohde-schwarz.com.cn/admin/system/upload/ueditor",
        // serverUrl: 'http://test1.waipai.ren:9058/admin/system/upload/ueditor',
        // UEditor 资源文件的存放路径
        UEDITOR_HOME_URL: "/static/UEditor/", // 重要重要重要重要重要重要重要重要重要 必须配置好路径!!!
      },
      indexs: [],
    };
  },

  watch: {
    indexs: {
      handler(val) {},
      deep: true,
    },
  },

  methods: {
    // 删除
    delSection(num) {
      let index = this.addEeditFormData.paragraphs[num - 1];
      if (this.addEeditFormData.paragraphs.length == 1) {
        this.$message.error(`最少保留一条`);
      } else {
        this.addEeditFormData.paragraphs.splice(index, 1);
      }
    },
    // 查询课文列表
    getList(pager = 1) {
      this.page = pager;
      this.loading = true;
      this.queryParams.pageNum = this.page;
      listText(this.queryParams).then((response) => {
        //this.textList = response.rows;
        this.textList = response.rows.splice(this.limit*(this.page-1),this.limit*this.page);
        this.total = response.total;
        this.loading = false;
        for (let textIndex in response.rows) {
          //收集名嘴姓名列表
          let tid = response.rows[textIndex].teacherName;
          let needPushToTeacherNameList = true;
          for (let index in this.teacherNameList) {
            if (this.teacherNameList[index].teacherName === tid) {
              needPushToTeacherNameList = false;
              break;
            }
          }
          if (needPushToTeacherNameList) {
            this.teacherNameList.push(response.rows[textIndex]);
          }
        }
      });
    },
    //获取年级列表
    getGrade() {
      this.loading = true;
      listGrade(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.gradeList = res.rows || [];
        } else {
          this.$message(res.msg);
        }
        this.loading = false;
      });
    },
    //所属题材列表
    getSubject() {
      getSubjectList().then((res) => {
        console.log("题材", res);
        if (res.code == 200) {
          this.SubjectList = res.rows || [];
        } else {
          this.$message(res.msg);
        }
      });
    },
    //选择grade的id获取学期信息
    selectGrade() {
      this.queryParams.semester = ""; //清空学期
      this.queryParams.unitId = ""; //清空单元
      this.loading = true;
      listSemester(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.semesterList = res.rows || [];
          this.getList();
        } else {
          this.$message(res.msg);
        }
        this.loading = false;
      });
    },
    //选择学期时,年级的id和学期id获取单元信息
    selectSemester() {
      this.queryParams.unitId = ""; //清空单元
      this.loading = true;
      listUnit(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.unitList = res.rows || [];
          this.getList();
        } else {
          this.$message(res.msg);
        }
        this.loading = false;
      });
    },
    //选择单元时
    selectUnit() {
      this.getList();
    },
    //添加弹框选择年级
    GradeSelect() {
      this.addEeditFormData.semester = "";
      listSemester({ gradeId: this.addEeditFormData.gradeId }).then((res) => {
        if (res.code == 200) {
          this.xueqiList = res.rows || [];
        } else {
          this.$message(res.msg);
        }
      });
    },
    //添加弹框选择学期
    XueqiSelect() {
      this.addEeditFormData.unitId = "";
      listUnit({
        gradeId: this.addEeditFormData.gradeId,
        semesterId: this.addEeditFormData.semester,
      }).then((res) => {
        if (res.code == 200) {
          this.danyuanList = res.rows || [];
        } else {
          this.$message(res.msg);
        }
      });
    },
    // 自动填写名师
    isShowInput() {
      this.isShowSelect = !this.isShowSelect;
    },
    //选择名师
    selectTeacher(indexs) {
      // this.addEeditFormData.teacherName = [];
      this.teacherNameList.forEach((item) => {
        if (indexs.includes(item.famousTeacherId))
          // this.addEeditFormData.teacherName.push(item.teacherName);
          this.addEeditFormData.teacherName = item.teacherName;
      });
    },
    //重置按钮
    resetQuery() {
      console.log("重置", this.queryParams);
      this.queryParams.gradeId = "";
      this.queryParams.unitId = "";
      this.queryParams.semester = "";
      this.queryParams.textName = "";
      this.getList();
    },
    //文件上传成功回调
    uploadSuccess(res) {
      console.log("upload", res);
      this.filename = res;
      this.addEeditFormData.ftextIle = res;
    },
    // 表单重置
    reset() {
      this.resetForm("addEeditFormData");
      this.type = "";
      this.count = [1];
      (this.gradeList = []), // 年级表格数据
        (this.unitList = []), //归属表格数据
        (this.semesterList = []); //归属学期数据

      //console.log("this.form",this.form)
    },
    handleUpdate(row) {
      const textId = row.textId || this.ids;
      getText(textId).then((response) => {
        this.addEeditFormData = response || {};
        this.addEeditFormData.paragraphs = response.paragraphs;
        this.addEeditFormData.paragraphs.paragraph = response.paragraphs[1];
        this.open = true;
        this.title = "修改课文";
        this.type = response.type;
      });
    },
    //点击关键词后面的搜索按钮 展示页面
    keywordSearch() {
      //返回第一页 然后重新渲染页面
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.textId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //新增按钮操作
    handleAdd() {
      this.open = true;
      this.title = "添加课文";
      console.log("this:", this);
    },

    //提交按钮
    submitForm() {
      this.addEeditFormData.content = this.htmlEncode(
        this.addEeditFormData.content
      );
      this.addEeditFormData.paragraphs.forEach((item) => {
        item.paragraph = this.htmlEncode(item.paragraph);
      });
      // this.addEeditFormData.teacherName = this.addEeditFormData.teacherName.join();
      // this.addEeditFormData.famousTeacherId = this.addEeditFormData.famousTeacherId.join();
      if (this.addEeditFormData.textId != null) {
        updateText(this.addEeditFormData).then((response) => {
          this.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        addText(this.addEeditFormData).then((response) => {
          this.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      }
      // this.$refs["addEeditFormData"].validate(valid => {
      //      if (valid) {........}
      // });
    },
    htmlEncode(str) {
      // 转义 元素的innerHTML内容即为转义后的字符
      let ele = document.createElement("span");
      ele.appendChild(document.createTextNode(str));
      return ele.innerHTML;
    },
    //删除按钮操作 */
    handleDelete(row) {
      const textIds = row.textId || this.ids;
      this.$confirm(
        '是否确认删除课文编号为"' + textIds + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delText(textIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      console.log("999999999999999999", res, file);
      this.addEeditFormData.ftextIle = res.data.url;
      if (res.code == 200) {
        this.$message.success("上传成功");
        this.fileList.push({ name: res.data.name, url: res.data.url });

        this.$emit("input", this.listToString(this.fileList));
      } else {
        this.$message.error("上传失败：" + res.msg);
      }
    },

    getTimes(file) {
      var content = file;
      //获取录音时长
      var url = URL.createObjectURL(content);
      //经测试，发现audio也可获取视频的时长
      var audioElement = new Audio(url);
      audioElement.addEventListener("loadedmetadata", (_event) => {
        this.audioDuration = parseInt(audioElement.duration);
        console.log(this.audioDuration);
      });
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      // this.dialogImageUrl = file.url;
      // this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    //上传成功
    handleAvatarSuccess(res, file) {
      // console.log("555555555555555555555555", res, file);
    },
    handleChangeAudio() {},
    addParagraphCount(event) {
      this.addEeditFormData.paragraphs.push({
        content: "",
        fileUrl: "", // 上传的文件路径 , 隔开
        fileName: "",
      });
    },
    // getUploadData(res, getUploadDataNumber) {//用于子组件修改父组件中的值
    //   this.uploadRes[getUploadDataNumber] = res
    //   console.log("父组件收到了上传结果的报文", res)
    // },
    //分页器回调
    handleSizeChange(size) {
      this.limit = size;
    },
  },

  created() {
    this.getList();
    this.getGrade(); // 查询所有归属年级
    //this.getSubject(); //查询归属题材列表
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  /* border: 1px dashed #d9d9d9; */
  border-radius: 6px;
  cursor: pointer !important;
  position: relative;
  overflow: hidden;
  display: block;
  margin: auto;
}

.avatar-uploader {
  position: relative;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
  color: #409eff;
}

.avatar-uploader-add {
  font-size: 28px;
  color: #8c939d;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 2px dashed #c4c4c4;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.audioLabel {
  text-align: left;
}
/deep/ textarea[name="editorValue"] {
  display: none;
}
</style>
